import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Brain, MessageCircle, Clock, Target, ArrowRight, Cat, Lightbulb, CheckCircle } from "lucide-react";
import { UnifiedCard } from "./UnifiedCard";

const studyFeatures = [
  {
    id: "1",
    title: "Template Assistance",
    description: "Get step-by-step guidance for filling out any assignment template with AI-powered prompts",
    icon: MessageCircle,
    category: "Writing Help"
  },
  {
    id: "2",
    title: "Time Planning",
    description: "Create personalized study schedules and break down complex projects into manageable tasks",
    icon: Clock,
    category: "Planning"
  },
  {
    id: "3",
    title: "Report Writing Coach",
    description: "Receive tailored feedback and suggestions to improve your writing quality and structure",
    icon: Target,
    category: "Writing Help"
  },
  {
    id: "4",
    title: "Assignment-Specific Prompts",
    description: "Get customized prompts and questions based on your specific assignment type and subject",
    icon: Lightbulb,
    category: "Guidance"
  }
];

const helpScenarios = [
  {
    scenario: "Lab Report Writing",
    prompt: "Help me structure my physics lab report with proper hypothesis and conclusion",
    response: "I'll guide you through each section step-by-step! 🔬"
  },
  {
    scenario: "Essay Planning",
    prompt: "I need to write a 5-paragraph essay about climate change",
    response: "Let's create an outline and timeline together! 📝"
  },
  {
    scenario: "Presentation Prep",
    prompt: "How should I organize my history presentation slides?",
    response: "I'll help you create engaging slides with clear structure! 🎯"
  }
];

export function MirrorAgentStudyHelp() {
  const launchMirrorAgent = (feature: string) => {
    console.log(`Launching Mirror Agent for: ${feature}`);
    // TODO: Implement Mirror Agent launch functionality
  };

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="text-center">
        <div className="flex items-center justify-center gap-2 mb-4">
          <Cat className="w-8 h-8 text-blue-600" />
          <h3 className="text-2xl font-bold text-blue-900">Mirror Agent Study Help</h3>
          <Brain className="w-6 h-6 text-blue-500" />
        </div>
        <p className="text-blue-700 max-w-2xl mx-auto">
          Your AI study companion provides personalized guidance for templates, time management, 
          and report writing with intelligent prompts tailored to your assignments.
        </p>
      </div>

      {/* Mirror Agent Features */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {studyFeatures.map((feature) => (
          <UnifiedCard
            key={feature.id}
            title={feature.title}
            description={feature.description}
            subjectLabel={feature.category}
            difficultyLevel="AI-Powered"
            topicTags={["AI Assistant", "Personalized", "Interactive"]}
            duration="On-demand"
            subject="Study Help"
            userCount={Math.floor(Math.random() * 1000) + 500}
            onPreview={() => console.log(`Preview feature: ${feature.title}`)}
            onPrimaryAction={() => launchMirrorAgent(feature.title)}
            primaryActionLabel="Launch AI Helper"
            previewLabel="Learn More"
            isPriority={true}
          />
        ))}
      </div>

      {/* Interactive Examples */}
      <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6">
        <h4 className="text-xl font-bold text-blue-900 mb-4 flex items-center gap-2">
          <MessageCircle className="w-6 h-6" />
          See Mirror Agent in Action
        </h4>
        <div className="space-y-4">
          {helpScenarios.map((scenario, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border border-blue-200">
              <div className="space-y-2">
                <div className="flex items-start gap-2">
                  <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white text-xs font-bold">
                    S
                  </div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">{scenario.scenario}</p>
                    <p className="text-sm text-gray-600 italic">"{scenario.prompt}"</p>
                  </div>
                </div>
                <div className="flex items-start gap-2 ml-8">
                  <div className="w-6 h-6 bg-orange-400 rounded-full flex items-center justify-center">
                    <Cat className="w-4 h-4 text-white" />
                  </div>
                  <p className="text-sm text-blue-700 font-medium">{scenario.response}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Explore More CTA */}
      <div className="text-center pt-6 border-t border-blue-200">
        <p className="text-gray-600 mb-4">Ready to boost your productivity with AI assistance?</p>
        <Button variant="outline" size="lg" className="border-blue-300 text-blue-700 hover:bg-blue-50">
          <Brain className="w-5 h-5 mr-2" />
          Explore All AI Study Tools
          <ArrowRight className="w-5 h-5 ml-2" />
        </Button>
      </div>
    </div>
  );
}
